<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>Bigshot</title>
        <style>
            body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 13px;
            }
            
            h1 {
                text-align:center;
                font-family: Arial, Helvetica, sans-serif;
                color:black;
                font-size: 26px;                
            }
            
            p.button {
                margin: 32px 0px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 13px;
            }
            
            p.button {
                margin: 32px 0px;
                font-family: Arial, Helvetica, sans-serif;
                color:white;
                font-size: 13px;
                background-color: #008000;
                border: 1px solid #006000;
                box-shadow: rgba(0,0,0,0.5) 0px 2px 4px;
                -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 4px;
                position:relative;
                padding: 4px;
            }
            
            p.button a {
                color: white;
                text-decoration: none;
                display:block;
                text-align:center;
                width: 100%;
                font-weight: bold;
            }
            
            p.button span.header {
                display:block;
                text-align:center;
                width: 100%;
                font-weight: bold;
            }
            
            p.button span.subtitle {
                display:block;
                text-align:center;
                width: 100%;
                font-weight: normal;
            }
        </style>
    </head>
    <body>
        <h1>Bigshot</h1>
        
        <p>
        This is a demonstration of Bigshot. Select the functionality you want to see below.
        </p>
        
        <p class="button">
        <a href="test.html"><span class="header">Bigshot</span><span class="subtitle">2D zoomable images</span></a>
        </p>
        
        <p class="button">
        <a href="simple.html"><span class="header">Bigshot Simple</span><span class="subtitle">Simple, untiled zoomable images</span></a>
        </p>
        
        <p class="button">
        <a href="vrpano.html"><span class="header">Bigshot VR</span><span class="subtitle">360 degree VR viewer. Requires a WebGL- or CSS3D-capable browser.</span></a>
        </p>
        
        <p class="button">
        <a href="vrpano.html#cyl-vr.bigshot"><span class="header">Bigshot VR (from cylinder projection input)</span><span class="subtitle">Shows off the same 360 degree VR viewer as above, but using
                a cylindrical panorama as input image - just to show that we can do that, too.</span></a>
        </p>
        
        <p class="button">
        <a href="vrpano.html#mars-vr.bigshot"><span class="header">Bigshot VR (Mars Opportunity Rover)</span><span class="subtitle">Shows off the same 360 degree VR viewer as above, but using
                NASA's panorama from the Mars Opportunity Rover - just to show that Bigshot is multiplanetary as well as multiplatform. Image Credit: NASA/JPL-Caltech/Cornell/Arizona State Univ.</span></a>
        </p>
    </body>
</html>